<template>
	<view>
		<view class="tou">
			<view class="header">
				<view style="height:20px;"></view>
				<view style="height:20px;"></view>
				<text class="header-title">奥维生物</text>
			</view>

			<view class="announcement">
				<view class="announcement-header">
					<image class="announcement-image" src="/static/image/gg.png" alt="公告图片"></image>
					<text class="announcement-text" @click="zhucerenyuan">公告：</text>
				</view>
				<text class="announcement-content" @click="toJiaZai">胎盘文化博物馆现对外免费预约参观！</text>
			</view>
		</view>

		<view class="container">
			<view class="museum-info" @click="toSpuDetails">
				<text class="museum-title">胎盘文化博物馆 </text>
				<view class="reservation">
					<view class="reservation-item geyy" @click="toGeRenYuYue">
						<image class="reservation-image" src="https://aw2025ht.kangye.xyz/api/profile/upload/bc00.png"
							alt="个人预约图片"></image>
					</view>
				</view>

				<view class="museum-introduction" @click="toBoWuGuanJieShao">
					<image class="museum-intro-image" src="https://aw2025ht.kangye.xyz/api/profile/upload/bwgjs.jpg"
						alt="博物馆介绍图片"></image>
				</view>

				<view class="visiting-guidelines" @click="toSuccess">
					<text class="guidelines-title">参观须知</text>
					<view class="guidelines-item cgxz">
						<image src="https://aw2025ht.kangye.xyz/api/profile/upload/cgxz.jpg" class="cgxzimg"></image>
					</view>
				</view>

				<text class="product-title">产品中心</text>
				<store-product v-for="(ProductDisplay, index) in BwgProductList" :key="index" appid="wxe9094455e312c8ce"
					:product-id="ProductDisplay.productId" />
			</view>
		</view>

		<view v-if="showMask" class="mask">
			<view class="auth-box button-container">
				<text style="margin:1px;"></text>
				<br />
				<text>博物馆想要获取您的手机号？</text><br />
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="custom-button">
					授权手机号
				</button>
			</view>
		</view>

		<view v-if="showNotice" class="notice-modal">
			<view class="notice-content">
				<view class="notice-header">游客预约须知</view>
				<view class="notice-list">
					<text>一、为提升游客参观体验，严格落实“限量、预约错峰”措施.</text>
					<text>二、采取全员实名免费预约参观。未满14周岁(含)的未成年人，须由成年人代为预约，并与预约人同步核验入馆。</text>
					<text>三、观众须使用实名注册手机号码进行预约，每个账号每个参观日可至多预约5人(其中一个订单中14周岁以下未成年人不超过三人)。每个证件号每日只能预约一次。使用虚拟手机号码完成注册的相关账号将被及时清理，同时取消相关预约。</text>
				</view>
				<view class="notice-btn" @click="showNoticeFun">我已阅读并同意</view>
			</view>
		</view>

		<use-tabber :list="list" :active="active"></use-tabber>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store/counter.js'
	import {
		storeToRefs
	} from 'pinia'
	import {
		passenger
	} from '@/api/index.js'
	import {
		getCode
	} from '@/utils/index.js'
	import {
		setDataWithExpiration,
		getDataWithExpiration
	} from '@/utils/benDiCunChuGuoQiShiJianChuo.js'
	import {
		ordersApi
	} from '@/api/reservationOrders.js';
	const {
		role,
		getRole
	} = storeToRefs(useStore())
	const store = useStore()
	const currentRole = ref('')
	const list = ref([])
	const active = ref(0)
	const BwgProductList = ref([])
	const showMask = ref(false)
	const uid = ref('')
	const isQianDao = ref('签到')
	const login_data = ref('')
	const showNotice = ref(false) // 新增：控制游客须知模态框显示状态55
	const timeRangeTo = ref('')

	const toGeRenYuYue = () => {
		const todayData = getDataWithExpiration('todayData')
		if (todayData) {
			showMask.value = false
			uni.navigateTo({
				url: '/package/pages/yuyueOne/yuyueOne'
			})
		} else {
			showMask.value = true
		}
	}


	const toBoWuGuanJieShao = () => {
		uni.switchTab({
			url: "/pages/message/message"
		})
	}


	const toSuccess = () => {
		// 新增：点击时显示游客须知模态框
		showNotice.value = true
	}

	const showNoticeFun = () => {
		// 新增 ：点击按钮时关闭模态框
		showNotice.value = false
	}

	const paramsUserId = ref('')

	onLoad(async (params) => {
		getCode()
		// onload的时候，判断是否要登陆
		const todayData = getDataWithExpiration('todayData')

		uni.setStorageSync("yuid", -1)

		if (params != null && todayData != null && params.userId != null) {
			await passenger.updateUserYaoQingJiFen(params.userId)
			uni.setStorageSync("yuid", -1)
		} else if (params != null && params.userId != null) {
			paramsUserId.value = params.userId
			uni.setStorageSync("yuid", params.userId)
		}


		// 尝试从接口获取最新时间配置
		const response = await ordersApi.getTime();
		const {
			availableDays,
			timeRange,
			list
		} = response.data;
		timeRangeTo.value = timeRange
		console.log(response.data)




		console.log("12333321", todayData)

		if (todayData) {

		} else {
			login_data.value = uni.setStorageSync('login_data', null)
			uid.value = login_data.value.uid;
		}

	})

	onShow(async () => {
		list.value = store.getRole()
		currentRole.value = store.role
		showMask.value = false

		const data = await ordersApi.getProducts();
		BwgProductList.value = data.data
	})



	const getPhoneNumber = async (e) => {
		showMask.value = false
		// 授权手机号的时候，把所有的历史缓存都清空
		
		try {
			const codeResult = await getCode()
			if (e.detail.errMsg === "getPhoneNumber:ok") {
				console.log(codeResult.code,e.detail.iv,e.detail.encryptedData)
				
				const res = await passenger.login({
					sessionKey: codeResult.code,
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData
				})


				uid.value = res.data.uid
				login_data.value = res.data
				uni.setStorageSync('addressManagement', res.data.addressManagements)
				isQianDao.value = res.data.isQianDao
				uni.setStorageSync('userPhone', res.data.phone)
				uni.setStorageSync("isQianDao", res.data.isQianDao)
				uni.setStorageSync('drivertoken', res.data.token)
				uni.setStorageSync('token', res.data.token)
				uni.setStorageSync("qianDaoDay", res.data.qianDaoDay)
				uni.setStorageSync("qianDaoJiFen", res.data.qianDaoJiFen)
				uni.setStorageSync('login_data', res.data)

				setDataWithExpiration('todayData', true)
				if (uni.getStorageSync("yuid") !== null && uni.getStorageSync("yuid") !== -1) {
					await passenger.updateUserYaoQingJiFen(paramsUserId.value)
					uni.setStorageSync("yuid", -1)
				}
				// 跳转链接
				uni.navigateTo({
					url: '/package/pages/yuyueOne/yuyueOne'
				})
			}
		} catch (error) {
			console.error('手机号授权失败', error)
		}
	}

	// const toSpuDetails = () => {
	// 	uni.navigateTo({
	// 		url: '/pages/skuDetails/skuDetails'
	// 	})
	// }
</script>

<style>
	.button-container {
		margin-top: 50px;
	}

	.custom-button {
		background-color: #3988ff;
		color: white;
		font-size: 28rpx;
		margin: 40rpx auto 20rpx auto;
		width: 371rpx;
		line-height: 67rpx;
		height: 67rpx;
		border: none;
		border-radius: 50rpx;
		cursor: pointer;
		transition: background-color 0.3s ease, transform 0.2s ease;
	}

	.custom-button:active {
		transform: scale(0.98);
	}

	.geyy {
		width: 100%;
		height: 100%;
		border-radius: 5px;
	}

	.geyy image {
		width: 97%;
		height: 103%;
		border-radius: 5px;
	}

	.ttyy {
		width: 41%;
		height: 100%;
	}

	.ttyy image {
		width: 100%;
		height: 103%;
	}

	.tou {
		background-image: url(https://aw2025ht.kangye.xyz/api/profile/upload/awsw.jpg);
		background-size: cover;
		height: 215px;
		background-position: center;
	}

	.container {
		background-color: #f4f4f4;
	}

	.header {
		padding: 20px 0;
		text-align: center;
	}

	.header-title {
		font-size: 18px;
		color: white;
		font-weight: bold;
	}

	.announcement {
		margin-top: 84rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #dcdcdc6b;
		color: #fff;
		border-radius: 10px;
		width: 90%;
		margin: 45px auto 0 auto;
	}

	.announcement-header {
		display: flex;
		align-items: center;
		padding: 10px;
		height: 30px;
	}

	.announcement-image {
		width: 15px;
		height: 15px;
		margin-right: 10px;
	}

	.announcement-text {
		font-size: 14px;
	}

	.announcement-content {
		padding: 10px;
		font-size: 12px;
	}

	.museum-info {
		background-color: #fff;
		padding: 40rpx;
	}

	.museum-title {
		font-size: 16px;
		font-weight: bold;
	}

	.museum-time {
		font-size: 12px;
		color: #999;
		margin-top: 5px;
	}

	.reservation {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		height: 241rpx;
	}

	.reservation-item {
		text-align: center;
		height: 100%;
	}

	.reservation-image {
		width: 100%;
		height: 100%;
	}

	.museum-introduction {
		margin-top: 18rpx;
	}

	.museum-intro-image {
		width: 100%;
		height: 274rpx;
		margin-top: 20rpx;
	}

	.visiting-guidelines {
		margin-top: 40rpx;
		height: 93px;
	}

	.guidelines-title {
		font-size: 14px;
		font-weight: bold;
	}

	.guidelines-item {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		height: 69%;
		width: 100%;
	}

	.cgxzimg {
		width: 100%;
		height: 100%;
	}

	.product-title {
		font-size: 28rpx;
		font-weight: bold;
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.auth-box {
		background: #fff;
		padding: 5px 37rpx 22rpx 37rpx;
		border-radius: 36rpx;
		text-align: center;
	}

	.notice-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.notice-content {
		background: linear-gradient(0deg, #FFFFFF 0%, #E6F2FF 100%);
		border-radius: 15px;
		padding: 25rpx;
		max-height: 80%;
		max-width: 80%;
	}

	.notice-header {
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 15rpx;
	}

	.notice-list text {
		display: block;
		margin: 10rpx 0;
		line-height: 1.8;
		text-align: left;
		font-size: 14px;
		letter-spacing: 2rpx;
	}

	.notice-btn {
		text-align: center;
		margin-top: 20rpx;
		padding: 20rpx 60rpx;
		background: linear-gradient(180deg, #007AFF 0%, #005CE6 100%);
		color: #FFFFFF;
		border: none;
		border-radius: 50rpx;
		cursor: pointer;
		font-size: 16px;
		box-shadow: 0 4px 12px rgba(0, 122, 255, 0.2);
		font-weight: 500;
	}
</style>